gallery.js
Skip the intro:
- Get it
- Use it
- Customize
Hello there, I am here. Ignoring my very important work, as always, to bring something I spent much too long making! The other day I saw a reddit post asking for an easy solution to image galleries, one that would require minimal coding as the asker was afraid they'd mess up badly during an edit.
Honestly, I get it. It's why do_blog even exists (not to mention I'm too lazy to update a whole page everytime I write a blog post >.>) Anyway, I recommended do_blog for the job, but it was understandably a little too specifically a blog script.
One thing led to one thing and now here I am, presenting Gallery! Check out the example below:
Yes, yes, very nice indeed. I am so happy I've, after all these years, found an easy solution to masonry. It's my favorite gallery display type.
Without the CSS, the HTML looks like below:
gifs/balloons.gif
# red, yellow, blue, green
gifs/bike.gif
# yellow
gifs/birdbath.gif
# birb, blue, yellow, green
gifs/cartooncarousel.gif
# blue, red, pink
gifs/changingflowers.gif
# orange, pink, green, blue
gifs/chemset.gif
# blue, green
gifs/clock.gif
# brown
gifs/dancin.gif
# black, white
Note, the masonry is part of the script, though it can be opted out of.
Get it
Downloads:
Copypastas:
Javascript
CSS
HTML
Use it
In the element with name=archive, you create objects in the following format:
path/to/image.jpg
# tag, comma separated, other tag
attribute=content
key: value
path/to/image.jpg is what would normally be the src in the img element.
You can tag images either using # or tags:
The difference between key: value and attribute=content is that attributes are your typical HTML attributes!
There are two important "keys" to have in mind, other than the tags one: title and caption.
title: Title of Image
caption: A description that can be super long or super short.
You can go to the next line if you want, it'll start a new paragraph, but don't skip a line or it'll stop capturing the caption.
<strong>You may use HTML here.</strong>
Instead of caption, you can also use description or details, but at the end of the day it's the same paragraph.
There are two attributes that do not affect the image directly:
class=class1 class2 class-3
title=lil popup thing
The classes are added to the "card" article that holds the image, so if you wanted to reference the image in your CSS with that class, you'd look for .class img.
The title attribute is that little popup that sometimes appears when you hover over links, and that affects the "View" and "Download" links.
Otherwise, attributes will affect the image. Don't add quotation marks!
An example of an image:
gifs/balloons.gif
# red, yellow, blue, green
title: Balloons
caption:
An eternal line of balloons rise toward their death.
They evade my hand running to the blaze.
class = balloony float
width=200
height=200
Which should result in:
<article id="image-gifs-balloons-gif" class="card balloony float" style="grid-row-end: span #;">
<h1>Balloons</h1>
<img src="gifs/balloons.gif" width="200" height="200">
<a href="?image=gifs%2Fballoons.gif" class="permalink"><span>View</span></a>
<div class="caption">
<p>An eternal line of balloons rise toward their death.
<p>They evade my hand running to the blaze.
</div>
<ul class="taglist">
<li class="tag"><a href="?find=red" title="red">red</a></li>
<li class="tag"><a href="?find=yellow" title="yellow">yellow</a></li>
<li class="tag"><a href="?find=blue" title="blue">blue</a></li>
<li class="tag"><a href="?find=green" title="green">green</a></li>
</ul>
</article>
Which looks like:
Balloons
View
An eternal line of balloons rise toward their death.
They evade my hand running to the blaze.
Customize
There's not much to customize in this one. And I think the options are pretty self-explanatory! To customize, make an object called GALLERY like so:
<script>
GALLERY = {
path: '',
masonry: true,
images_per_page: 20,
min_width: 176,
grid_gap: 10,
max_pagination_links: 9,
}
</script>
path: ''
- By default an empty string, it can be changed to the name of the folder/directory where you keep all your images. If you plan to have images from different folders or even from other websites, you should leave it empty.
masonry: true
- This page better explains masonry and ways to go about it, but it's essentially an uneven grid that makes it so the space between each item is about the same. You can change this to
false and work with your own styling.
images_per_page: 20
- Pretty self-explanatory! By default, a maximum of 20 results are show per page, though you could make it as many as 1000000000000000000..... Of course, you'd start experiencing loading issues after about 50...
min_width: 176
- This is the width in pixels of "cards" in the grid. A "card" contains your image and tags, so it's pretty much the width of your image as well. The "cards" could get bigger depending on the size of the screen, but they will always be at least this size.
grid_gap: 10
- In pixels, the gap or space between "cards" when in the grid.
max_pagination_links: 9
- The pagination can have up to this number of links until it becomes a select tool (to save up on space). If you'd rather have the select tool at all times, just change it to
0 or 1.
The language options are as follow (can also be updated in the GALLERY object):
Find_tags: 'Find tag(s): ',
Search_mode: 'Search mode: ',
Search_OR: 'OR',
Search_AND: 'AND',
Avoid_tags: 'Avoid tag(s): ',
Showing_results: ['Showing results ',' of '],
See_all_tags: 'See all tags',
Prev_page: 'Prev',
Page: 'Page: ',
Next_page: 'Next',
Prev_result: '← Prev',
Return_to_gallery: 'Gallery',
Next_result: 'Next →',
Permalink: 'View',
Download: 'Download',
No_description: '<p><i>No description</i>.</p>',
